import React, { useState, useEffect } from 'react'
import styles from '../../styles/Home.module.css'
import modalStyles from '../../styles/Modal.module.css'
import Modal from '../components/Modal'
import useInput from '../../hooks/useInput'

const LIST_KEY = 'shortcut_list'

const List = () => {
  const [list, setList] = useState([])
  const [totalCount, setTotalCount] = useState(0)
  useEffect(() => {
    const initial = localStorage.getItem(LIST_KEY) ? JSON.parse(localStorage.getItem(LIST_KEY)) : {}
    setList(initial.list || [])
    setTotalCount(initial.totalCount || 0)
  },[])
  
  const initial = {}
  const [visible, setVisible] = useState(false)
  const titleInput = useInput("")
  const urlInput = useInput("")
  const inputPlaceholder = '在Google上搜索，或者输入一个网址'
  

  const addShortcut = () => {
    setVisible(true)
  }

  const onCancel = () => {
    setVisible(false)
  }

  const onOk = () => {
    const title = titleInput.input.value
    const url = urlInput.input.value
    const newTotal = totalCount + 1
    const params = {
      title,
      url,
      id: newTotal,
      icon: '/baidu.com'
    }
    const newList = [...list].concat(params)
    setList(newList)
    setTotalCount(newTotal)
    localStorage.setItem(LIST_KEY, JSON.stringify({
      list: newList,
      totalCount: newTotal
    }))
    onCancel && onCancel()
  }

  const onDelete = () => {

  }

  return (
    <>
      <div className={styles.content}>
        <input className={styles.input} placeholder={inputPlaceholder} />
        <div className={styles.list}>
          {list && list.length > 0 && list.map((item, index) => {
            return <a key={index} href={item.url} target="_blank" className={styles.grid}>
              <div className={styles.innerTitle}>
                <img className={styles.icon} src={item.icon} />
                <div className={styles.title}>
                  <span>{item.title}</span>
                </div>
              </div>
            </a>
          })}
          <a key='add' className={styles.grid} onClick={addShortcut}>
            <div className={styles.innerTitle}>
              <img className={styles.icon} src="/add.jpg" />
              <div className={styles.title}>
                <span>添加快捷方式</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <Modal visible={visible}>
        <div className={modalStyles.title}><p>添加快捷方式</p></div>
        <div className={modalStyles.container}>
          <div className={modalStyles.formControl}>
            <label htmlFor="title">名称</label>
            <input id="title" type="text" {...titleInput.input} />
          </div>
          <div className={modalStyles.formControl}>
            <label htmlFor="url">网址</label>
            <input id="url" type="text" {...urlInput.input} />
          </div>
        </div>
        <div className={modalStyles.actions}>
          <button onClick={onCancel} className={modalStyles.cancel}>取消</button>
          <button onClick={onOk} className={modalStyles.ok}>完成</button>
        </div>
      </Modal>
    </>
  )
}

export default List